<template>
  <div id="app">

    <router-view/>
  </div>
</template>
<script>
export default {
  name:  "App",
  // 解决刷新页面后，页面path和页面内容不同bug
  created() {
    //在页面刷新时将vuex里面的信息保存在sessionStorage
    window.addEventListener("beforeunload",() => {
      sessionStorage.setItem("editableTabs",JSON.stringify(this.$store.state.menus.editableTabs))
      sessionStorage.setItem("editableTabsValue",this.$store.state.menus.editableTabsValue)
    })
    //页面加载时读取session中的信息，并加载到store中
    sessionStorage.getItem("editableTabsValue")&&this.$store.commit("getEditableTabsValue",sessionStorage.getItem("editableTabsValue"))
    sessionStorage.getItem("editableTabs")&&this.$store.commit("getEditableTabs",JSON.parse(sessionStorage.getItem("editableTabs")))

  },
  //监控
  //当用户通过输入url访问界面时，此时store中和session中可能都没有该页面标签页的信息，这时就要通过watch解决
  //原理：在我们访问对应path之前，就把path对应的title、name加入到store中
  watch: {
    $route(to,from){
      //当我前往的路由路径不是login时，就把该路由信息加入到标签页数组中
      if(to.path !== '/login'){
        let obj  = {
          title: to.meta.title,
          name: to.name
        }
        this.$store.commit("addTab",obj)
      }
    }
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'margin:0;')
  },

}
</script>
<style>

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  margin: 0;
}
/*去除所有链接的下划线*/
a {
  text-decoration: none;
}


.body{
  margin: 0;
}
</style>
